<template>
    <div id="articleList">

      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">

        <el-tab-pane label="全部文章" name="allArticle">
          <articleTable state="0" :showEdit="false" :showDelete="false" :showRestore="false" :activeName="activeName" v-if="alive.allArticle"></articleTable>
        </el-tab-pane>

        <el-tab-pane label="已发表" name="published">
          <articleTable state="1" :showEdit="true" :showDelete="true" :showRestore="false" :activeName="activeName" v-if="alive.published"></articleTable>
        </el-tab-pane>

        <el-tab-pane label="草稿箱" name="drafts">
          <articleTable state="2" :showEdit="true" :showDelete="true" :showRestore="false" :activeName="activeName" v-if="alive.drafts"></articleTable>
        </el-tab-pane>

        <el-tab-pane label="回收站" name="recycleBin">
          <articleTable state="3" :showEdit="false" :showDelete="true" :showRestore="true" :activeName="activeName" v-if="alive.recycleBin"></articleTable>
        </el-tab-pane>

        <!--<el-tab-pane label="博客管理" name="BlogManage">博客管理</el-tab-pane>-->
        <!--<el-tab-pane label="博客配置" name="BlogConfig">博客配置</el-tab-pane>-->
      </el-tabs>

    </div>
</template>

<script>
  import articleTable from './ArticleTable';
    export default {
        name: "ArticleList",
      components:{
          articleTable,
      },
      data() {
        return {
          activeName:'allArticle',//设置默认选中的tabs
          alive:{
            allArticle:true,
            published:false,
            drafts:false,
            recycleBin:false,
          },
        }
      },
      methods:{
        handleClick(tab, event) {
          for(let i in this.alive){
            if(tab.name != i){
              this.alive[i] = false;
            }else {
              this.alive[i] = true;
            }
          }
        },
      }
    }
</script>

<style scoped>
  #articleList{
    width:calc(100% - 20px) ;
    padding: 20px 10px;
  }
</style>
